<template>
    <div style="margin:15px">
    <el-table :data="MaterialList" v-loading="isLoading" >
            <el-table-column label="Bom物料编号" prop="code"/>
            <el-table-column label="Bom物料名称" prop="name"/>
            <el-table-column label="规格型号" prop="specification"/>
            <el-table-column label="物料单位" prop="unitName"/>
            <el-table-column label="物料分类" prop="categoryName"/>
 
           
    </el-table>
     <!-- 分页组件pagination -->
            <el-pagination
      v-if="pagination.total > 0"
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next"
      :total="pagination.total"
      @size-change="loadMaterialBom"
      @current-change="loadMaterialBom"
      style="margin-top: 15px; justify-content: flex-end;"
    />
    </div>


    <!-- 根据工单查询产品 -->
</template>
<script setup>
//导入接口
import { getMaterialBomPage } from '@/api/materialBom';
import { ref, reactive, watch } from 'vue';
import { Plus, Delete } from '@element-plus/icons-vue';
import { columnAlignment, ElMessage, SCOPE } from 'element-plus';
import ProductList from '../workflow/product-list.vue';
// --------------------------------
const MaterialList = ref([]);
const pagination = ref({currentPage:1,pageSize:10,total:0})

const isLoading = ref(false);//标价加载状态
// ---------------------------------
//从前一个页面获取传来的数据
const props = defineProps({
    parentMaterialId:{
            type: [Number,String],
            required: true
    }
})

//获取数据
const loadMaterialBom = async()=>{
    isLoading.value = true;
    if(!props.parentMaterialId){
        console.log("怎么可能没查出来数据")
    }
    getMaterialBomPage(
        pagination.value.currentPage,
        pagination.value.pageSize,
        props.parentMaterialId
    ).then(res=>{
        MaterialList.value = res.data.list;
        pagination.value.total = res.data.total;  
    }).finally(()=>{
        isLoading.value = false;
    })
}

//使用watch来触发第一次数据加载，并响应id变化
watch(() => props.parentMaterialId,(newId) =>{
    if(newId){
        pagination.value.currentPage = 1;
        loadMaterialBom();
    }
},{
    immediate: true
});
</script>
<style>
</style>